<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sheet Browser with Pagination</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 20px;
        }
        .search-container {
            margin-bottom: 20px;
            display: flex;
            gap: 10px;
        }
        .search-input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }
        .search-button {
            padding: 10px 20px;
            background-color: #2c2c2c;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        .search-button:hover {
            background-color: #6c6c6c;
        }
        .navigation-button {
            padding: 10px 20px;
            background-color: #2196F3;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        .navigation-button:hover {
            background-color: #0b7dda;
        }
        .navigation-button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }
        .current-sheet {
            font-size: 18px;
            font-weight: bold;
            margin: 15px 0;
            padding: 10px;
            background-color: #e9ecef;
            border-radius: 4px;
        }
        .sheet-list, .row-list {
            list-style-type: none;
            padding: 0;
        }
        .sheet-item, .row-item {
            background-color: white;
            padding: 15px;
            margin-bottom: 10px;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transition: transform 0.2s;
        }
        .sheet-item {
            cursor: pointer;
            background-color: #f8f9fa;
        }
        .sheet-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        .row-item {
            display: flex;
            gap: 20px;
            cursor: pointer;
        }
        .row-icon {
            flex: 0 0 60px;
        }
        .row-icon img {
            max-width: 50px;
            max-height: 50px;
        }
        .row-content {
            flex: 1;
        }
        .row-id {
            font-weight: bold;
            color: #6c757d;
            margin-bottom: 5px;
        }
        .row-name {
            font-weight: bold;
            font-size: 16px;
            margin-bottom: 5px;
        }
        .row-singular {
            font-style: italic;
            color: #495057;
            margin-bottom: 5px;
        }
        .row-description {
            color: #212529;
        }
        .no-results {
            text-align: center;
            color: #666;
            padding: 20px;
            background-color: white;
            border-radius: 4px;
        }
        .loading {
            text-align: center;
            padding: 20px;
            color: #666;
        }
        .pagination {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }
        .page-info {
            align-self: center;
            color: #495057;
        }
        .view-controls {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        /* Detail view styles */
        .detail-view {
            background-color: white;
            padding: 20px;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .detail-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
        }
        .detail-icon {
            margin-right: 20px;
        }
        .detail-icon img {
            max-width: 64px;
            max-height: 64px;
        }
        .detail-title {
            flex: 1;
        }
        .detail-name {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .detail-id {
            color: #6c757d;
            font-size: 14px;
        }
        .detail-section {
            margin-bottom: 20px;
        }
        .detail-section-title {
            font-weight: bold;
            margin-bottom: 10px;
            border-bottom: 1px solid #eee;
            padding-bottom: 5px;
        }
        .detail-field {
            display: flex;
            margin-bottom: 8px;
        }
        .detail-field-name {
            font-weight: bold;
            min-width: 150px;
            color: #495057;
        }
        .detail-field-value {
            flex: 1;
            word-break: break-word;
        }
        .nested-object {
            background-color: #f8f9fa;
            padding: 10px;
            border-radius: 4px;
            margin-top: 5px;
        }
        .array-item {
            padding: 5px;
            border-bottom: 1px solid #eee;
        }
    </style>
</head>
<body>
<h1>Sheet Browser</h1>

<div id="sheetView">
    <div class="search-container">
        <input type="text" id="sheetSearchInput" class="search-input" placeholder="Search sheet names...">
        <button id="sheetSearchButton" class="search-button">Search</button>
    </div>

    <div id="sheetListContainer">
        <div class="loading">Loading sheet data...</div>
    </div>
</div>

<div id="rowView" style="display: none;">
    <div class="view-controls">
        <button id="backButton" class="navigation-button">← Back to Sheets</button>
        <div class="page-info" id="pageInfo">Page 1</div>
    </div>

    <div class="current-sheet" id="currentSheet"></div>

    <div class="search-container">
        <input type="text" id="rowSearchInput" class="search-input" placeholder="Search row names...">
        <button id="rowSearchButton" class="search-button">Search</button>
    </div>

    <div id="rowListContainer">
        <div class="loading">Loading row data...</div>
    </div>

    <div class="pagination">
        <button id="prevPageButton" class="navigation-button" disabled>Previous Page</button>
        <button id="nextPageButton" class="navigation-button">Next Page</button>
    </div>
</div>

<div id="detailView" style="display: none;">
    <div class="view-controls">
        <button id="backToRowsButton" class="navigation-button">← Back to Rows</button>
    </div>

    <div class="current-sheet" id="detailViewTitle"></div>

    <div id="detailContentContainer">
        <div class="loading">Loading detail data...</div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // DOM elements
        const sheetView = document.getElementById('sheetView');
        const rowView = document.getElementById('rowView');
        const detailView = document.getElementById('detailView');
        const sheetListContainer = document.getElementById('sheetListContainer');
        const rowListContainer = document.getElementById('rowListContainer');
        const detailContentContainer = document.getElementById('detailContentContainer');
        const currentSheetElement = document.getElementById('currentSheet');
        const detailViewTitle = document.getElementById('detailViewTitle');
        const pageInfoElement = document.getElementById('pageInfo');

        // Search elements
        const sheetSearchInput = document.getElementById('sheetSearchInput');
        const sheetSearchButton = document.getElementById('sheetSearchButton');
        const rowSearchInput = document.getElementById('rowSearchInput');
        const rowSearchButton = document.getElementById('rowSearchButton');

        // Navigation elements
        const backButton = document.getElementById('backButton');
        const backToRowsButton = document.getElementById('backToRowsButton');
        const prevPageButton = document.getElementById('prevPageButton');
        const nextPageButton = document.getElementById('nextPageButton');

        // Data state
        let allSheets = [];
        let currentSheetName = '';
        let currentRows = [];
        let filteredRows = [];
        let currentPage = 1;
        const rowsPerPage = 99;
        let lastRowId = null;
        let hasMoreRows = true;
        let currentSearchTerm = '';
        let currentRowId = null;

        // Initialize the app
        fetchSheetData();

        // Fetch sheet data from API
        function fetchSheetData() {
            fetch('https://v2.xivapi.com/api/sheet')
                .then(response => response.json())
                .then(data => {
                    allSheets = data.sheets || [];
                    displaySheets(allSheets);
                })
                .catch(error => {
                    console.error('Error fetching sheet data:', error);
                    sheetListContainer.innerHTML = '<div class="no-results">Failed to load sheet data. Please try again later.</div>';
                });
        }

        // Display sheets function
        function displaySheets(sheets) {
            if (sheets.length === 0) {
                sheetListContainer.innerHTML = '<div class="no-results">No matching sheets found.</div>';
                return;
            }

            const listHtml = `
                <ul class="sheet-list">
                    ${sheets.map(sheet => `
                        <li class="sheet-item" data-sheet="${sheet.name}">
                            <div class="sheet-name">${sheet.name}</div>
                        </li>
                    `).join('')}
                </ul>
            `;

            sheetListContainer.innerHTML = listHtml;

            // Add click event listeners to sheet items
            document.querySelectorAll('.sheet-item').forEach(item => {
                item.addEventListener('click', function() {
                    currentSheetName = this.getAttribute('data-sheet');
                    loadSheetRows();
                });
            });
        }

        // Load rows for the current sheet
        function loadSheetRows() {
            // Reset state for new sheet
            currentPage = 1;
            lastRowId = null;
            hasMoreRows = true;
            currentSearchTerm = '';
            currentRowId = null;
            rowSearchInput.value = '';

            // Update UI
            sheetView.style.display = 'none';
            rowView.style.display = 'block';
            detailView.style.display = 'none';
            currentSheetElement.textContent = `Sheet: ${currentSheetName}`;
            rowListContainer.innerHTML = '<div class="loading">Loading row data...</div>';
            updatePaginationButtons();

            // Build API URL with fields parameter
            const fields = 'Name,Description,Icon,Singular';
            let apiUrl = `https://v2.xivapi.com/api/sheet/${currentSheetName}?limit=${rowsPerPage}&fields=${fields}`;

            // Fetch rows data
            fetch(apiUrl)
                .then(response => response.json())
                .then(data => {
                    currentRows = data.rows || [];
                    filteredRows = [...currentRows];
                    displayRows();

                    // Check if we have more rows to load
                    if (currentRows.length < rowsPerPage) {
                        hasMoreRows = false;
                    } else {
                        lastRowId = currentRows[currentRows.length - 1].row_id;
                    }
                })
                .catch(error => {
                    console.error(`Error fetching rows for ${currentSheetName}:`, error);
                    rowListContainer.innerHTML = '<div class="no-results">Failed to load rows data. Please try again later.</div>';
                });
        }

        // Display rows function with pagination
        function displayRows() {
            if (filteredRows.length === 0) {
                rowListContainer.innerHTML = '<div class="no-results">No matching rows found.</div>';
                return;
            }

            // Calculate pagination
            const startIndex = (currentPage - 1) * rowsPerPage;
            const endIndex = startIndex + rowsPerPage;
            const paginatedRows = filteredRows.slice(startIndex, endIndex);

            const listHtml = `
                <ul class="row-list">
                    ${paginatedRows.map(row => `
                        <li class="row-item" data-row-id="${row.row_id}">
                            <div class="row-icon">
                                ${row.fields.Icon && row.fields.Icon.path ?
                                    `<img src="https://v2.xivapi.com/api/asset?path=${encodeURIComponent(row.fields.Icon.path)}&format=webp" alt="${row.fields.Name || 'Icon'}">` :
                                    'No icon'}
                            </div>
                            <div class="row-content">
                                <div class="row-id">ID: ${row.row_id}</div>
                                <div class="row-name">${row.fields.Name || 'No name'}</div>
                                ${row.fields.Singular ? `<div class="row-singular">${row.fields.Singular}</div>` : ''}
                                ${row.fields.Description ? `<div class="row-description">${row.fields.Description}</div>` : ''}
                            </div>
                        </li>
                    `).join('')}
                </ul>
            `;

            rowListContainer.innerHTML = listHtml;
            pageInfoElement.textContent = `Page ${currentPage}`;
            updatePaginationButtons();

            // Add click event listeners to row items
            document.querySelectorAll('.row-item').forEach(item => {
                item.addEventListener('click', function() {
                    currentRowId = this.getAttribute('data-row-id');
                    loadRowDetail();
                });
            });
        }

        // Load detail for a specific row
        function loadRowDetail() {
            // Update UI
            rowView.style.display = 'none';
            detailView.style.display = 'block';
            detailViewTitle.textContent = `Sheet: ${currentSheetName} - Row: ${currentRowId}`;
            detailContentContainer.innerHTML = '<div class="loading">Loading detail data...</div>';

            // Fetch row detail
            fetch(`https://v2.xivapi.com/api/sheet/${currentSheetName}/${currentRowId}`)
                .then(response => response.json())
                .then(data => {
                    displayRowDetail(data);
                })
                .catch(error => {
                    console.error(`Error fetching row detail for ${currentSheetName}/${currentRowId}:`, error);
                    detailContentContainer.innerHTML = '<div class="no-results">Failed to load detail data. Please try again later.</div>';
                });
        }

        // Display row detail
        function displayRowDetail(rowData) {
            const fields = rowData.fields || {};

            // Create header with icon and name
            let html = `
                <div class="detail-view">
                    <div class="detail-header">
                        ${fields.Icon && fields.Icon.path ? `
                            <div class="detail-icon">
                                <img src="https://v2.xivapi.com/api/asset?path=${encodeURIComponent(fields.Icon.path)}&format=webp" alt="Icon">
                            </div>
                        ` : ''}
                        <div class="detail-title">
                            <div class="detail-name">${fields.Name || 'No name'}</div>
                            <div class="detail-id">ID: ${rowData.row_id}</div>
                        </div>
                    </div>
            `;

            // Add fields
            for (const [fieldName, fieldValue] of Object.entries(fields)) {
                if (fieldName === 'Icon') continue; // Skip icon since we already displayed it

                html += `
                    <div class="detail-section">
                        <div class="detail-section-title">${fieldName}</div>
                        ${renderFieldValue(fieldValue)}
                    </div>
                `;
            }

            html += `</div>`; // Close detail-view div
            detailContentContainer.innerHTML = html;
        }

        // Helper function to render field values (including nested objects and arrays)
        function renderFieldValue(value, depth = 0) {
            if (value === null || value === undefined) {
                return '<div class="detail-field-value">null</div>';
            }

            if (Array.isArray(value)) {
                if (value.length === 0) {
                    return '<div class="detail-field-value">[]</div>';
                }

                let html = '';
                value.forEach((item, index) => {
                    html += `
                        <div class="array-item">
                            <div class="detail-field">
                                <div class="detail-field-name">[${index}]</div>
                                <div class="detail-field-value">
                                    ${renderFieldValue(item, depth + 1)}
                                </div>
                            </div>
                        </div>
                    `;
                });
                return html;
            }

            if (typeof value === 'object') {
                if (Object.keys(value).length === 0) {
                    return '<div class="detail-field-value">{}</div>';
                }

                let html = '<div class="nested-object">';
                for (const [key, val] of Object.entries(value)) {
                    html += `
                        <div class="detail-field">
                            <div class="detail-field-name">${key}</div>
                            <div class="detail-field-value">
                                ${renderFieldValue(val, depth + 1)}
                            </div>
                        </div>
                    `;
                }
                html += '</div>';
                return html;
            }

            // Simple value (string, number, boolean)
            return `<div>${value}</div>`;
        }

        // Update pagination button states
        function updatePaginationButtons() {
            const totalPages = Math.ceil(filteredRows.length / rowsPerPage);

            prevPageButton.disabled = currentPage <= 1;
            nextPageButton.disabled = currentPage >= totalPages && !hasMoreRows;
        }

        // Load next page of rows
        function loadNextPage() {
            if (currentSearchTerm) {
                // For searched results, just paginate through what we have
                currentPage++;
                displayRows();
            } else {
                // For non-searched results, fetch more data if needed
                const totalLocalPages = Math.ceil(currentRows.length / rowsPerPage);

                if (currentPage < totalLocalPages) {
                    // We have more local rows to show
                    currentPage++;
                    displayRows();
                } else if (hasMoreRows) {
                    // Need to fetch more rows from API
                    currentPage++;
                    fetchMoreRows();
                }
            }
        }

        // Fetch more rows from API
        function fetchMoreRows() {
            if (!hasMoreRows) return;

            rowListContainer.innerHTML = '<div class="loading">Loading more rows...</div>';

            const fields = 'Name,Description,Icon,Singular';
            let apiUrl = `https://v2.xivapi.com/api/sheet/${currentSheetName}?limit=${rowsPerPage}&after=${lastRowId}&fields=${fields}`;

            fetch(apiUrl)
                .then(response => response.json())
                .then(data => {
                    const newRows = data.rows || [];
                    currentRows = [...currentRows, ...newRows];
                    filteredRows = [...currentRows];

                    if (newRows.length < rowsPerPage) {
                        hasMoreRows = false;
                    } else {
                        lastRowId = newRows[newRows.length - 1].row_id;
                    }

                    displayRows();
                })
                .catch(error => {
                    console.error('Error fetching more rows:', error);
                    rowListContainer.innerHTML = '<div class="no-results">Failed to load more rows. Please try again.</div>';
                });
        }

        // Search sheet names
        function searchSheets() {
            const searchTerm = sheetSearchInput.value.toLowerCase();

            if (!searchTerm) {
                displaySheets(allSheets);
                return;
            }

            const filteredSheets = allSheets.filter(sheet =>
                sheet.name.toLowerCase().includes(searchTerm)
            );

            displaySheets(filteredSheets);
        }

        // Search row names
        function searchRows() {
            currentSearchTerm = rowSearchInput.value.toLowerCase();
            currentPage = 1;

            if (!currentSearchTerm) {
                filteredRows = [...currentRows];
            } else {
                filteredRows = currentRows.filter(row =>
                    row.fields.Name && row.fields.Name.toLowerCase().includes(currentSearchTerm)
                );
            }

            displayRows();
        }

        // Event listeners
        sheetSearchButton.addEventListener('click', searchSheets);
        sheetSearchInput.addEventListener('keyup', function(e) {
            if (e.key === 'Enter') {
                searchSheets();
            }
        });

        rowSearchButton.addEventListener('click', searchRows);
        rowSearchInput.addEventListener('keyup', function(e) {
            if (e.key === 'Enter') {
                searchRows();
            }
        });

        backButton.addEventListener('click', function() {
            sheetView.style.display = 'block';
            rowView.style.display = 'none';
            detailView.style.display = 'none';
            sheetSearchInput.value = '';
            searchSheets();
        });

        backToRowsButton.addEventListener('click', function() {
            rowView.style.display = 'block';
            detailView.style.display = 'none';
        });

        prevPageButton.addEventListener('click', function() {
            if (currentPage > 1) {
                currentPage--;
                displayRows();
            }
        });

        nextPageButton.addEventListener('click', loadNextPage);
    });
</script>
</body>
</html>